<template>
	<view v-if="pageCloak">
		<view class="modal-view" :style="top ? 'top:' + top + 'px' : ''" @touchmove.stop.prevent @tap='tagModal'
			:class="[{ show: !hide }, { ismobg: ismobg }, 'modal-view-' + position]">
			<view class="modal-container" :style="'height:' + heightupx" @tap.stop.prevent :class="'modal-' + position">
				<view class="modal-row modal-submit modal-border-bottom"
					v-if="!onlyCose && !noBotton && position === 'bottom'">
					<view class="modal-cancel" v-if="!noCancel" :style="cancelStyle" @tap="cancel">
						{{ cancelText }}
					</view>
					<view class="modal-col">
						{{ title || "" }}
					</view>
					<view class="modal-cancelLs iconfont icon-close1 fontS40 font-bold" @tap="cancel">
						<!-- {{confirmText || ""}} -->
					</view>
					<view class="modal-confirm " v-if="!noConfirm" :style="confirmStyle" @tap="confirm">
						{{ confirmText || "" }}
					</view>
				</view>

				<view class="close-bottom" @tap="cancel" v-if="onlyCose && position === 'bottom'"></view>



				<view class="modal-row modal-submit" v-if="!noBotton && position === 'center'">
					<view class="close" @tap="cancel"></view>
					<view class="modal-col">{{ title || "" }}</view>

				</view>




				<view class="modal-row modal-btns" v-if="!noBotton && position === 'center'">
					<view class="btn cancel" v-if="!noCancel" @tap="cancel">
						{{ cancelText }}
					</view>

					<view class="btn" @tap="confirm">
						{{ confirmText || "" }}
					</view>
				</view>

				<view class="scroll"
					:style="(!noBotton && (position === 'left' || position === 'right') ? 'bottom: 44px;' : (!noBotton && position === 'bottom' && !onlyCose ? 'top: 121rpx;' : '')) + (onlyCose ? 'top:0;' : '')">
					<slot />
				</view>
				<view class="modal-row modal-border-top"
					v-if="!noBotton && (position === 'left' || position === 'right')">
					<view class="modal-col" v-if="!noCancel" :style="cancelStyle" @tap="cancel">
						{{ cancelText || "" }}
					</view>
					<view class="modal-col modal-btn" :style="confirmStyle" @tap="confirm">
						{{ confirmText || "" }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		top: null,

		heightupx: null,

		ismobg: {
			type: Boolean,
			default: false
		},
		disable: {
			type: Boolean,
			default: false
		},
		onlyCose: {
			type: Boolean,
			default: false
		},
		hidden: {
			type: Boolean,
			default: true
		},
		position: {
			type: String,
			default: 'right'
		},
		noConfirm: {
			type: Boolean,
			default: false
		},
		noCancel: {
			type: Boolean,
			default: false
		},

		noBotton: {
			type: Boolean,
			default: false
		},
		cancelStyle: null,
		confirmStyle: null,
		title: null,
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			pageCloak: false, // 小程序端初始化时，组件闪烁
			hide: this.hidden
		};
	},
	watch: {
		hidden(nVal, oVal) {
			this.hide = nVal
		},
		hide(nVal, oVal) {
			this.$emit('update:hidden', nVal)
		}
	},
	mounted() {
		this.pageCloak = true
	},
	methods: {
		tagModal(e) {
			this.hide = !this.hide;
			if (this.hide) {
				this.$emit('cancel', e)
			}
		},
		scrollBottom() {
			this.$emit('scrollBottom')
		},

		cancel(e) {
			this.$emit('onlyCancel', e)
			this.tagModal(e)
			// 内部关闭弹窗


		},
		confirm(e) {
			this.tagModal(e)
			// 内部关闭弹窗
			this.$emit('confirm', e)
		}
	}
}
</script>

<style lang="scss">
.modal-bottom {
	border-radius: 50rpx 50rpx 0 0 !important;
}

.modal-btns {
	z-index: 1000;
	justify-content: space-around;
	padding: 30upx;
	box-sizing: initial;
	height: 68upx !important;
}

.btn {
	flex: 1;
	margin: 0 40upx;
	background: linear-gradient(135deg, #FF595F 0%, #FF2B52 100%);
	border-radius: 34upx;
	line-height: 68upx;
	color: #fff;
	text-align: center;
}

.btn.cancel {
	background: #aaa;
}

.close-bottom {
	background: url(https://mini-client-base-pic.oss-cn-beijing.aliyuncs.com/wx/close_round.png) no-repeat center;
	background-size: 38upx;
	height: 68upx;
	width: 68upx;
	opacity: .7;
	position: absolute;
	top: 15upx;
	right: 20upx;
	z-index: 10
}

.modal-view {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, .6);
	display: flex;
	transition: all .2s linear;
	visibility: hidden;
	opacity: 0;

	&.ismobg {
		top: initial;
		background: none;

		.modal-container {
			border-top: 1upx solid #eee;
			box-shadow: 0 -10upx 20upx #efefef;


		}

	}

	.modal-container {
		background: #fff;
		transition: transform .2s linear;
		position: relative;

	}

	.scroll {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.modal-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		position: absolute !important;
		left: 0;
		right: 0;
		bottom: 0;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30upx;
		color: #2F3134;

	}

	.modal-col {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
		position: relative;
		transition: all .1s;
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
	}

	.modal-border-top::after,
	.modal-border-bottom::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1upx;
		border-top: 1upx solid #F4F6F9;
		;
		transform: scaleY(.36) translateY(-1px);
	}

	.modal-border-bottom::after {
		top: 100%;
		left: 42upx;
		right: 42upx;
	}

	.modal-btn {
		background: $uni-main-color;
		color: #fff;
	}

	.modal-submit {
		top: 0;
		height: 120upx;
		line-height: 120upx;

		border-bottom: 1upx solid $uni-border-color;

		.modal-cancel,
		.modal-confirm {
			padding: 0 40upx;
		}

		.modal-cancelLs {
			padding: 0 40upx;
			color: #292929;
			position: absolute;
			right: 0;
			top: 0;
		}

		.modal-cancel {
			color: $uni-text-color-grey;
		}

		.modal-confirm {
			font-size: 30upx;
			color: $uni-main-color;
		}
	}


}

.modal-view.show {
	opacity: 1;
	visibility: visible;

	.modal-container {
		transform: translate3d(0, 0, 0) !important;
	}
}

.modal-view-top {
	align-items: flex-start;

	.modal-container {
		width: 100%;
		height: 60vh;
		transform: translate3d(0, -100%, 0);
	}
}

.modal-view-right {
	justify-content: flex-end;

	.modal-container {
		width: 70%;
		height: 100vh;
		transform: translate3d(100%, 0, 0);
	}
}

.modal-view-bottom {
	align-items: flex-end;

	.modal-container {
		width: 100%;

		transform: translate3d(0, 100%, 0);
		border-top-left-radius: 0upx;
		border-top-right-radius: 0upx;

	}

}

.modal-view-center {

	align-items: center;
	justify-content: space-around;

	.modal-container {
		width: 92%;

		transform: translate3d(0, 300%, 0);
		border-radius: 10upx;


	}

	.scroll {
		top: 100upx;
	}

	.close {
		z-index: 900;
		background: url(../../static/img/close.png) no-repeat center;
		background-size: 26upx;
		height: 68upx;
		width: 68upx;
		opacity: .7;
		position: absolute;
		top: 15upx;
		right: 30upx
	}
}

.modal-view-left {
	justify-content: flex-start;

	.modal-container {
		width: 70%;
		height: 100vh;
		transform: translate3d(-100%, 0, 0);
	}
}
</style>
